<template>
  <div class="word_list_wrapper">
    <div class="word_list_inner">

      <el-table
        :data="word_list" border style="width: 100%;"max-height="430">
        <el-table-column fixed prop="src" label="单词" width="200"></el-table-column>
        <el-table-column prop="tgt" label="翻译" width="200"></el-table-column>
        <el-table-column prop="imp" label="重要度" width="200"></el-table-column>
        <el-table-column prop="cmd" label="熟练度" width="200"></el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="clickItem(scope.row)" type="text" size="small">查看</el-button>
            <el-button type="text" size="small" @click="delWord(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>


      <WordDetail :word = 'cur_click_item' :dialog-form-visible="dialogFormVisible" v-on:showDialog = "showDialog" ></WordDetail>






    </div>
  </div>



</template>

<script>
  import WordDetail from "./WordDetail";
  import {postRequest} from "../utils/api";

  export default {
      name: "WordList",
      props: ['word_list'],
      data(){
        return {
          dialogFormVisible: false,
          cur_click_item: {}
        }
      },
      methods: {
        delWord(item){
          let param = {wordid: item.id}
          postRequest('word_consumer/del_word', param).then(res=>{
            this.$message({showClose: true, message: JSON.stringify(res.data), type: 'success'})
            //重新搜索单词列表并设置到wordList中去
            this.$emit('delword')
          }).catch(err=>{
            this.$message({showClose: true, message: JSON.stringify(err), type: 'error'})
          })
        },
        handleClick(row) {
          this.$message({showClose:true,message: row,type: 'success'})
          console.log(row);
        },
        setFeature_str(word){
          console.debug("setFeature_str start word:"+JSON.stringify(word))
          let features = word.features
          word.feature_strs = []
          for(var i = 0; i < features.length; i++){
            word.feature_strs.push(features[i].descript)
          }
          console.debug("setFeature_str end")
        },
        showDialog(value){
          console.debug("enter showDialog(lisenter)  value="+value)
          this.dialogFormVisible = value
        },
        clickItem(item){
          console.debug("click word item: "+JSON.stringify(item))
          //获取wordid，到服务器获取详细word信息，包括features信息
          postRequest('word_consumer/get_word_by_wordid', {wordid: item.id}).then(res=>{
            this.$message({showClose:true, message: JSON.stringify(res.data.msg), type: 'success'})
            //形成新的word——item放到cur_click_item中取
            this.cur_click_item = res.data.t
            this.setFeature_str(this.cur_click_item)
            console.debug("get item——word："+JSON.stringify(res.data.t))
            //请求成功之后，显示弹窗
            this.dialogFormVisible = true
          }).catch(err=>{
            this.$message({showClose:true, message: JSON.stringify(err), type: 'error'})
          })


        }
      },
      components: {
        WordDetail
      }
    }
</script>

<style scoped>

</style>
